<template>
    <view>
        <z-paging
            ref="paging"
            v-model="dataList"
            @query="queryList">
            <template #top>
                <tn-navbar>通道权限设置</tn-navbar>
            </template>
            <view class="tn-p tn-bg-card">
            	<view v-for="(item, index) in dataList" :key="index" class="tn-shadow-md tn-p tn-mb tn-radius   tn-white_bg ">
            		<view class="tn-flex justify-between justify-start tn-mb-sm items-center">
            			<view>
            				<tn-button type="primary" shape="circle">{{ item.name[0] }}</tn-button>
            				<text class="tn-text-xl tn-text-bold tn-ml-sm">{{ item.name }}</text>
            			</view>
            			<text class=" tn-grey_text">192.168.1.1</text>
            		</view>
            		<view class="    tn-pt tn-pl-0 tn-pr-0 tn-ml-0 tn-mr-0 tn-text-sm ">
            		 
            			<view class="tn-flex justify-between tn-mb-sm tn-grey_text items-center">
            				<text> 
            					是否自动放行
            				</text>
            				<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(item.id,COUPON_TYPE, 'couponType', $event)">
            					<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" >
									
									<template #suffix>
										<tn-icon name="sort"></tn-icon>
									</template>
									
								</tn-input>
            				</tn-bubble-box>
							
            			</view>
            			<view class="tn-flex justify-between tn-mb-sm tn-grey_text items-center">
            				<text> 
            					是否有通行权限
            				</text>
            				<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(item.id,COUPON_TYPE, 'couponType', $event)">
            				<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" >
            					
            					<template #suffix>
            						<tn-icon name="sort"></tn-icon>
            					</template>
            					
            				</tn-input>
            				</tn-bubble-box>
            			</view>
						
						<view class="tn-flex justify-between tn-mb-sm tn-grey_text items-center">
							<text> 
								车位满是否自动放行
							</text>
							<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(item.id,COUPON_TYPE, 'couponType', $event)">
								<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" >
									
									<template #suffix>
										<tn-icon name="sort"></tn-icon>
									</template>
									
								</tn-input>
							</tn-bubble-box>
						</view>
						
						<view class="tn-flex justify-between tn-mb-sm tn-grey_text items-center">
							<text> 
								允许进入的车辆类型
							</text>
							<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(item.id,COUPON_TYPE, 'couponType', $event)">
								<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" >
									
									<template #suffix>
										<tn-icon name="sort"></tn-icon>
									</template>
									
								</tn-input>
							</tn-bubble-box>
						</view>
						
						<view class="tn-flex justify-between tn-mb-sm tn-grey_text items-center">
							<text> 
								权限类型
							</text>
							<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(item.id,COUPON_TYPE, 'couponType', $event)">
							<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" >
								
								<template #suffix>
									<tn-icon name="sort"></tn-icon>
								</template>
								
							</tn-input>
							</tn-bubble-box>
						</view>
						
					<view class="tn-flex justify-between tn-mb-sm tn-grey_text items-center">
						<text> 
							开始时间
						</text>
						<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(item.id,COUPON_TYPE, 'couponType', $event)">
							<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" >
								
								<template #suffix>
									<tn-icon name="sort"></tn-icon>
								</template>
								
							</tn-input>
						</tn-bubble-box>
						 
					</view>
						
						<view class="tn-flex justify-between tn-mb-sm tn-grey_text items-center">
							<text> 
								结束时间
							</text> 
							<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(item.id,COUPON_TYPE, 'couponType', $event)">
								<tn-input :border="false" style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择可停放车库" >
									
									<template #suffix>
										<tn-icon name="sort"></tn-icon>
									</template>
									
								</tn-input>
							</tn-bubble-box>
							  
            			</view>
            		</view>
            		 
            	</view>
            </view>

            <template #loadingMoreNoMore></template>
        </z-paging>
    </view>
</template>

<script setup lang="ts">
	  import { onMounted, ref } from "vue";
	  import {   COUPON_TYPE } from "@/utils/dict"; // 引入字典
	  import { onLoad } from "@dcloudio/uni-app"; 
    // ===============模拟数据 =========================
	const pkId = ref();
    const filterData = () => {};
    // 模拟数据
    const tempList = ref([]);

    // z-paging 示例
    const paging = ref(null);
    // 数据列表
    const dataList = ref();

    const queryList = (pageNo, pageSize) => {
        // 模拟数据

        for (let i = 0; i < 10; i++) {
            tempList.value.push({
                name: "地面" + i,
                type: "主岗亭",
                total: 11111,
                residue: 212,
            });
        }
        paging.value.complete(tempList.value);
    };

    // ===========================================
	// 表单数据模型
		const formData = ref({ 
			couponType: "", // 修改为通讯码
			 
		});
	// 字典处理-字典枚举映射
	const pickerDict = ref({
		dict: {
	    couponType: COUPON_TYPE
		},
		label: {couponType:{}}
	});
	 
	
	 
	// 字典处理-处理字典数据格式
	const getDictLabel = () => {
		pickerDict.value.label = {};
		for (let key in pickerDict.value.dict) {
			let dict = pickerDict.value.dict[key];
			pickerDict.value.label[key] = dict.reduce((acc, cur) => {
				acc[cur.value] = cur.label;
				return acc;
			}, {});
		}
	};
	// 确认选择器的选择
	const confirmBubble = (pk,dict, labelKey, value) => {
		console.log('confirmBubble=>', labelKey);
		console.log('confirmBubble1=>', dict[value].value);
		formData.value[labelKey] = dict[value].value;
		
		  paging.value.reload(true);
	};
	onLoad((options) => {
		pkId.value = options.id
		if(pkId.value){
			// getDetailById
		}
		getDictLabel(); 
	});
	
</script>

<style></style>
